import React, { useRef, useEffect } from 'react';
import { useLocation, Outlet } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './AnimatedRoutes.css'; // 引入动画样式

// 带过渡动画的路由出口组件
const AnimatedRoutes = () => {
  const location = useLocation();
  const nodeRef = useRef(null);

  // 监听路由变化，用于触发动画
  useEffect(() => {
    // 滚动到顶部（可选）
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <TransitionGroup>
      {/* CSSTransition 用于单个元素的过渡动画 */}
      <CSSTransition
        key={location.pathname} // 用路由路径作为唯一key
        nodeRef={nodeRef}
        timeout={300} // 动画持续时间（毫秒）
        classNames="page-transition" // CSS类前缀
      >

        <div ref={nodeRef} style={{padding:24,height:"100%",minHeight:"calc(100vh - 190px)"}}>
          {/* Outlet 用于渲染匹配的子路由组件 */}
          <Outlet />
        </div>
      </CSSTransition>
    </TransitionGroup>
  );
};

export default AnimatedRoutes;
